<template>
    <div>

        <!--背景-->
        <div 
        v-if="detail.coverImgUrl" 
        class="bg" :style="{ backgroundImage: `url(${detail.coverImgUrl})` }"></div>
        <!--导航-->
        <div class="nav">
            <div @click="back">
                <van-icon size="23" color="#000" name="arrow-left" />
            </div>
            <div class="songName">{{ detail.name }}</div>
        </div>

        <div class="detail">
            <div class="detail-top">
                <div class="left">
                    <img :src="detail.coverImgUrl" alt="" />
                </div>
                <div class="right">
                    <div class="name">{{ detail.name }}</div>
                    <div class="creator" v-if="detail.creator">
                        <div class="avatarUrl">
                            <img :src="detail.creator.avatarUrl" alt="" />
                        </div>
                        <div>{{ detail.creator.nickname }}</div>
                    </div>
                </div>
            </div>
            <div class="detail-bottom">
                {{ detail.description }}
            </div>
        </div>
    <List :list="MusicList" />
        
    </div>
</template>

<script>

import { getListDetail,getdemo } from '../Api/Home'
export default {
    data() {
        return {
            //获取歌单信息
            detail: {},
            //存放歌单内所有歌曲

            MusicList:[]
        };
    },
    created() {
        //获取携带过来的歌单id
        let ids = this.$route.query.id;
        console.log(ids);
        this.SongListDetail(ids);
    },
    methods: {
        //获取歌曲详情
        async MusicDetail(ids){
            let res =await getdemo(ids)
            console.log(res)
            this.MusicList =res.data.songs
        },
        //获取歌单详情
        async SongListDetail(id) {
            let res = await getListDetail(id);
            console.log(res);
        //获取所有歌曲id
        let arr=[]
        res.data.playlist.trackIds.forEach((item)=>{
            arr.push(item.id)

        })
        // console.log("这是全部歌曲的id")

        //赋值
            this.MusicDetail(arr.join())
            this.detail = res.data.playlist;
            console.log(this.detail);
        },

        //返回上一页
        back() {
            this.$router.go(-1);
        },
    },
};
</script>
    
<style lang="less" scoped>
.detail-bottom {
    width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 10px;
}

.avatarUrl {
    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}

.creator {
    display: flex;
    align-items: center;
}

.detail {
    padding: 15px;
}

.left {
    width: 100px;
    height: 100px;
    margin-right: 15px;

    img {
        width: 100px;
        border-radius: 10px;
    }
}

.detail-top {
    display: flex;
}

.bg {
    height: 230px;
    background-size: cover;
    background-position: 0 0;
    filter: blur(50px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    z-index: -1;
}

.songName {
    margin-left: 10px;
}

.nav {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 10px;
}
</style>
